<template >
    <div>
        <!-- 面包屑导航区 -->
 <el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>用户管理</el-breadcrumb-item>
   <el-breadcrumb-item>用户列表</el-breadcrumb-item>
 </el-breadcrumb>

 <!-- 卡片视图区域 -->
 <el-card >
   <el-row :gutter="20">
       <!-- 搜索与添加区域 -->
       <el-col :span="10">
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList" >
               <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
           </el-input>
       </el-col>
       <!-- 添加用户区域 -->
        <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
        </el-col>
   </el-row>
   <!-- 用户列表区域 -->
   <el-table :data="userList" border stripe>
       <el-table-column label="#"  type="index" width="40"></el-table-column>
       <el-table-column label="姓名"  prop="username" width="150"></el-table-column>
       <el-table-column label="邮箱"  prop="email" width="180"></el-table-column>
       <el-table-column label="电话"  prop="mobile" width="180"></el-table-column>
       <el-table-column label="超级管理员"  prop="role_name" width="180"></el-table-column>
       <el-table-column label="状态"  width="180">
           <template slot-scope="scope">
               <!-- 显示这行的数据 -->
               <!-- {{scope.row}} -->
               <el-switch
                 v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
              </el-switch>
           </template>
       </el-table-column>
       <el-table-column label="操作">
           <template slot-scope="scope">
               <!-- 修改按钮 -->
               <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
               <!-- 删除按钮 -->
               <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
               <!-- 分配角色按钮 -->
             <el-tooltip effect="dark" content="分配角色" placement="top" :hide-after="1000" :enterable="false" >
                  <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
              </el-tooltip>
              
           </template>
       </el-table-column>
   </el-table>
   <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
   
</el-card>
   <!-- 添加用户的对话框 -->
<el-dialog
  title="添加用户"
  :visible.sync="addDialogVisible"
  width="50%"
  @close="addDialogClosed"
 >
 <!-- 内容主体区域 -->
 <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
    <el-form-item label="用户名" prop="username">
       <el-input v-model="addForm.username"></el-input>
    </el-form-item>
     <el-form-item label="密码" prop="password">
       <el-input v-model="addForm.password"></el-input>
    </el-form-item>
     <el-form-item label="邮箱" prop="email">
       <el-input v-model="addForm.email"></el-input>
    </el-form-item>
     <el-form-item label="手机" prop="mobile">
       <el-input v-model="addForm.mobile"></el-input>
    </el-form-item>
 </el-form>
  <!-- 底部区域 -->
   <span slot="footer" class="dialog-footer">
     <el-button @click="addDialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="addUser">确 定</el-button>
   </span>
</el-dialog> 
 <!--修改用户的对话框 -->
<el-dialog
  title="修改用户"
  :visible.sync="editDialogVisible"
  width="50%"
  @close="editDialogClosed"
 >
  <el-form :model="editForm" :rules="addFormRules" ref="editFormRef" label-width="70px">
    <el-form-item label="用户名">
      <el-input v-model="editForm.username" disabled></el-input>
    </el-form-item>
     <el-form-item label="邮箱"  prop="email">
      <el-input v-model="editForm.email"></el-input>
    </el-form-item>
     <el-form-item label="手机" prop="mobile">
      <el-input v-model="editForm.mobile" ></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUserInfo">确 定</el-button>
  </span>
</el-dialog>
 
 <!-- 分配角色的对话框 -->
 <el-dialog
  title="分配角色"
  :visible.sync="setRoleDialogVisible"
  width="50%"
  @close="setRoleDialogClosed"
  >
  <div>
      <p>当前的用户：{{userInfo.username}}</p>
      <p>当前的角色：{{userInfo.role_name}}</p>
      <p>分配新角色：
      <el-select v-model="selectedRoleId" placeholder="请选择">
           <el-option
               v-for="item in  rolesList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id">
            </el-option>
      </el-select>
      </p>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="setRoleInfo">确 定</el-button>
  </span>
</el-dialog>
 </div>  
</template>

<script>
export default {
    data() {
           //验证手机号规则
           var checkMobile = (rule,value,cb)=>{
               const regMobile=/^1(3|4|5|6|7|8|9)\d{9}$/
               if(regMobile.test(value)){
                   return cb()
               }
               cb(new Error('请输入正确的手机号'))
             }
        return {
         
            // 获取用户列表的参数对象
            queryInfo:{
                // 查询参数
                query:'',
                // 当前页码
                pagenum:1,
                // 每页显示条数
                pagesize:2
            },
            // 用户数据集合
            userList:[],
            // 总记录数
            total:0,
            // 控制对话框的显示和隐藏
            addDialogVisible:false,
            // 添加用户的表单数据
            addForm:{
                username:'',
                password:'',
                email:'',
                mobile:''

            },
             // 控制分配角色对话框的显示与隐藏
            setRoleDialogVisible: false,
            // 添加表单的验证规则对象
           addFormRules:{
               username:[
                   { required: true, message: '请输入用户名', trigger: 'blur' },
                   
                 {min: 3, max: 10, message: '请用户名长度3~10字符之间', trigger: 'blur' }
               ],
               password:[
                   { required: true, message: '请输入密码', trigger: 'blur' },
                   { min: 6, max: 15, message: '密码长度在 6 到 15 个字符', trigger: 'blur' }
               ],
               email:[
                  { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                  { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
               ],
               mobile:[
                  { required: true, message: '请输入手机号', trigger: 'blur' },
                  { validator: checkMobile,message: '请输入合法的手机号', trigger: 'blur' }
               ]
           } ,
           // 控制修改用户对话框的显示与隐藏
           editDialogVisible:false,
           // 查询到用户信息对象
           editForm:{},

          // 需要被分配角色的用户信息
           userInfo:{},
          // 所有角色的数据列表
           rolesList:[],
          // 已选中的id值
          selectedRoleId:''   
          
        }
    },
    created(){
        this.getUserList()
    },
    methods:{
        getUserList(){
            this.axios.get('users',{params:this.queryInfo}).then(
                result=>{
                    console.log(result.data)
                    if(result.data.meta.status !==200) return this.$message.error('获取用户列表失败！');
                     this.userList = result.data.data.users
                     this.total = result.data.data.total
                    
                })
        },
        // 监听pagesize改变的事件 mewSize每页条数的值
        handleSizeChange(newSize){
         console.log(newSize)
         this.queryInfo.pagesize=newSize
         this.getUserList()
        },
        // 监听 页码值 改变的事件
        handleCurrentChange(newCurrent){
            console.log(newCurrent)
            this.queryInfo.pagenum=newCurrent
            this.getUserList()
        },
        //监听 switch 开关状态的改变 
        userStateChanged(userinfo){
            this.axios.put(`users/${userinfo.id}/state/${userinfo.mg_state}`).then(result=>{
                if(result.data.meta.status!==200){
                    userinfo.mg_state =!userinfo.mg_state
                    return this.$message.error('更新用户状态失败')
                }
                    console.log("更新用户状态成功")
            })
        },
        // 监听添加用户对话框的关闭事件
        addDialogClosed(){
            // 关闭表单时，清空表单项
            this.$refs.addFormRef.resetFields()
        },
        //点击按钮添加用户数据
        addUser(){
            // 对整个表单进行校验的方法判断填入的数据是否满足要求
             this.$refs.addFormRef.validate(valid=>{
                 console.log(valid)
                 if(!valid) return
                //  可以发起添加用户的网络请求
                this.axios.post('users',this.addForm).then(result=>{
                    console.log(result)
                     if(result.data.meta.status!==201){
                          this.$message.error('添加用户失败')
                     }
                     this.$message.success('添加用户成功')
                      this.getUserList()
                      this. addDialogVisible=false  
                })
             })
        },
        //展示编辑用户的对话框
        showEditDialog(id){
            this.axios.get('users/'+id).then(result=>{
                // console.log(result)
                 if(result.data.meta.status!==200) return this.$message.error('查询用户信息失败')
                  this.editForm = result.data.data
            })
          this.editDialogVisible=true
        },
        // 监听修改用户对话框的关闭事件
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()
        },
        //修改用户信息并提交
        editUserInfo(){
            this.$refs.editFormRef.validate(vaild=>{
                // console.log(vaild)
                if(!vaild) return
                // 修改用户信息的数据操作
                this.axios.put('users/'+this.editForm.id, {
                   email:this.editForm.email,
                   mobile:this.editForm.mobile}).then(result=>{
                    // console.log(result)
                    if(result.data.meta.status!==200) return this.$message.error('更新用户信息失败')
                   
                    // 关闭对话框
                    this.editDialogVisible=false;
                    // 刷新数据列表
                    this.getUserList()
                    // 提示修改成功信息
                     this.$message.success('更新用户信息成功')
                })
            })
        },
        // 根据id删除对应得用户信息
        removeUserById(id){
        //  弹框提示用户是否删除
         const res =  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示',{
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
           }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
            this.axios.delete('users/'+id).then(result=>{
               if(result.data.meta.status!==200) return this.$message.error('删除用户失败')
               this.getUserList();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        })
     },
    //  展示分配角色的对话框
     setRole(userInfo){
         this.userInfo=userInfo
        // 在展示对话框之前，获取所有角色列表
        this.axios.get('roles').then(result=>{
            console.log(result.data)
             if(result.data.meta.status !==200) return this.$message.error('获取角色列表失败！')
            this.rolesList = result.data.data
        })
        
         this.setRoleDialogVisible = true

     },
    //  点击按钮，分配角色
    setRoleInfo(){
        if(!this.selectedRoleId){
            return this.$message.error('请选择要分配的角色')
        }
        console.log(this.selectedRoleId)
        this.axios.put(`users/${this.userInfo.id}/role`,{rid:this.selectedRoleId }).then(result=>{
            console.log(result.data)
             if(result.data.meta.status !==200) return this.$message.error('更新角色失败！')
             this.$message.success('更新角色成功！')
             this.getUserList();
              this.setRoleDialogVisible = false
        })
        
    },
    // 关闭分配角色弹出框时，清空角色
    setRoleDialogClosed(){
        this.selectedRoleId=''
        this.userInfo={}
    }
   }
}
</script>

<style scoped>
   .el-breadcrumb{
       margin-bottom: 15px;
       font-size: 12px
   }
   .el-card{
       box-shadow: 1px, 2px, 10px,rgb(175, 68, 68) !important;
   }
   .el-table{
       margin-top: 15px;
       font-size: 12px;
   }
   .el-pagination{
       margin-top: 15px
   }

</style>
